@import '../variable/color.scss';
.btn {
  position: relative;
  line-height: normal;
  user-select: none;
  border: none;
  outline: none;
  color: #fff;
  background: none;
  box-shadow: none;
  -webkit-appearance: none;
  white-space: nowrap;
  box-sizing: border-box;
  -tap-highlight-color: transparent;
  &:before {
    display: none;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
  }
  &:active {
    &:before {
      display: block;
    }
  }
  &[disabled] {
    opacity: 0.4;
  }
}
.btn-flex {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.btn-lg {
  height: 0.44rem;
  font-size: 0.16rem;
  letter-spacing: 0.02rem;
}
.btn-md {
  height: 0.38rem;
  font-size: 0.14rem;
  letter-spacing: 0.02rem;
}
.btn-sm {
  height: 0.32rem;
  font-size: 0.12rem;
  letter-spacing: 0.01rem;
}
.btn-block {
  display: block;
  width: 100%;
}
.btn-primary {
  background: $primary;
}
.btn-success {
  background: $success;
}
.btn-info {
  background: $info;
}
.btn-warning {
  background: $warning;
}
.btn-danger {
  background: $danger;
}
.btn-circle {
  border-radius: 9.99rem;
}
.btn-radius {
  border-radius: 0.04rem;
}
.btn-gradient {
  background: linear-gradient(90deg, rgba(251, 66, 101, 1) 0%, rgba(255, 120, 67, 1) 100%);
}
.btn-shadow {
  box-shadow: 0rem 0.04rem 0.08rem 0rem rgba(236, 71, 86, 0.3);
}
